<template>
  <div class="contents">
    <PanelTitle title="系统架构" />
    <!-- <div class="img-container">
      <img src="@/assets/bg.jpg" style="width: 800px" alt="" />
    </div> -->
    <div style="display: flex; justify-content: center; align-items: center; height: calc(100% - 15vh );">
      <img src="@/assets/jiagou.png" style="max-width: 90%; max-height: 90%;" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
</script>
<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
}

.img-container {
  position: relative;
  display: inline-block;
}

.img-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.4); /* 设置半透明背景 */
  border-radius: 50%;
  opacity: 0.8;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>